<template>
	<view class="bagBox">
		<!-- swper -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item  v-for="(its,index) in imglist" :key="index">
					<view class="swiper-item uni-bg-red">
						<image @click="goBanner(its)" :src="baseURLImgUPD+its.bannerImage" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--  -->
		<view class="menus-box">
			<image class="m2" src="@/static/icons/aa5.png" mode=""></image>
			<image class="m4" src="@/static/icons/aa3.png" mode=""></image>
			<image class="m3" src="@/static/icons/aa4.png" mode=""></image>
			<image class="m1" src="@/static/icons/aa1.png" mode=""></image>
			<view class="" @click="diagnosis()">一键预诊</view>
		</view>
		<!--  -->
		<view class="show_bag_list_tit">
			<view class="">最新案例</view>
			<!-- <view class="" @click="caseList()">全部<image class="m1" src="@/static/icons/aa11.png" mode=""></image></view> -->
		</view>
		<!-- 列表 -->
		<view class="noneping" v-if="list.length == 0">
			<image src="@/static/ics/bg1.png" mode=""></image>
			<view class="">暂无数据~</view>
		</view>
		<view v-else class="list-box">
			<view class="views" v-for="(itms,index) in list" :key="index">
				<view class="listM3">
					<image class="imas" src="@/static/icons/q2.png" mode="">
						<view class="">案例ID {{itms.case_code6}}</view>
						<view class="" @click="goDetail(itms,index)">查看更多<image class="image"
								src="@/static/icons/aa15.png" mode=""></image>
						</view>
				</view>
				<view class="BgM4">
					<!-- v-for="(i,d) in itms.treatList" :key="d" -->
					<view @click="getDas(itms,i)" class="listM4" v-for="(i,d) in itms.treatList" :key="d">
						<view class="M4List">
							<view class="">治疗记录ID {{i.treat_code8}}</view>
							<view class="">{{i.treat_createtime}}</view>
						</view>
						<image class="m1" src="@/static/icons/aa14.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>

		<zdy-tabbar :current-page="1"></zdy-tabbar>
	</view>
</template>

<script>
	import {
		bannerList,
		getHomecaseList
	} from '@/api/pagesApi/index.js'
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	export default {
		data() {
			return {
				//swper
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 图片
				baseURLImgUPD: "",
				//轮播图图片列表
				imglist: [],

				list: [],
				//视频
				inputValue: '',
				videoContext: '',



			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onShow() {
			this.baseURLImgUPD = baseURLShowImgUP.baseURLShowImgUP;

			bannerList().then(res => {
				console.log(res)
				this.imglist = res.data.rows
			})

			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			bannerList().then(res => {
				console.log(res)
				this.imglist = res.data.rows
			})
			
			this.getList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		mounted() {

		},
		onLoad() {

		},

		methods: {
			getTreat(i) {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				wx.setStorageSync('wzCaseid', i.case_id)
				uni.navigateTo({
					url: '../../packageA/pages/index/case/treatment'
				})
			},
			//banner跳转
			goBanner(i) {
				console.log(i)
				uni.reLaunch({
					// url: '../../packageA/pages/index/diagnosis',
					url: i.bannerLinkpage,
					
				})
			},

			getDas(i,smI) {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				console.log(smI.treat_id)
				uni.navigateTo({
					url: `../../packageA/pages/index/case/detail?id=${i.case_id}&tid=${smI.treat_id}`
				})
			},

			getList() {
				getHomecaseList().then(res => {
					console.log(res)
					this.list = res.data.data
				})
			},

			caseList() {
				uni.navigateTo({
					url: '../../packageA/pages/index/case/index'
				})
			},
			goDetail(i) {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				wx.setStorageSync('wzCaseid', i.case_id)
				uni.navigateTo({
					url: '../../packageA/pages/index/case/treatment'
				})
			},
			//预诊
			diagnosis() {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				uni.navigateTo({
					url: '../../packageA/pages/index/diagnosis'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.bagBox {
		width: 100%;
		min-height: calc(100vh - 200rpx);
		padding-bottom: 200rpx;
		background-color: #F6F6F6;
		position: absolute;
	}

	.uni-margin-wrap {
		width: 400rpx;
		width: 100%;
	}

	.swiper {
		height: 420rpx;
	}

	.swiper-item {
		display: block;
		height: 420rpx;
		line-height: 420rpx;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
		}
	}


	.menus-box {
		width: calc(96%);
		height: 200rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		position: absolute;
		top: 300rpx;
		left: 2%;
		overflow: hidden;

		.m1 {
			position: absolute;
			left: 42.43px;
			top: 10.62px;
			width: 81px;
			height: 98px;
			opacity: 1.1;
		}

		.m2 {
			position: absolute;
			left: 140px;
			top: 40.62px;
			width: 127px;
			height: 127px;
			opacity: 1;
		}

		.m3 {
			position: absolute;
			left: 134px;
			top: 57.62px;
			width: 45px;
			height: 45px;
			opacity: 1;
		}

		.m4 {
			position: absolute;
			left: -30px;
			top: -30px;
			width: 227px;
			height: 258.62px;
			opacity: 1;
		}

		view {
			position: absolute;
			right: 20px;
			bottom: 15px;
			width: 96px;
			height: 34px;
			border-radius: 17px;
			opacity: 1;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			line-height: 34px;
			background: linear-gradient(180deg, #5AD2C9 0%, #16D7A8 100%);
		}

	}

	.show_bag_list_tit {
		width: 96%;
		margin: 140rpx auto 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;

		view:first-child {
			font-size: 32rpx;
		}

		image {
			margin-left: 10rpx;
			width: 15rpx;
			height: 20rpx;
		}
	}

	.noneping {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		view {
			margin-top: 30rpx;
		}

		image {
			margin-top: 80rpx;
			width: 400rpx;
			height: 400rpx;
		}

		view:first-child {
			color: #999;
			font-size: 24rpx;
		}
	}

	.list-box {
		width: 100%;
		margin: 20rpx auto 0;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.views {
			margin: 0 auto 40rpx;
			position: relative;
			// left: 2%;
			width: calc(96%);
			padding-bottom: 20rpx;
			min-height: 160rpx !important;
			border: 1rpx solid #CBE8E6;
			border-radius: 15rpx;

			.listM3 {
				position: relative;
				width: calc(100% - 40rpx);
				height: 30px;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				view {
					position: relative;
					z-index: 100;
				}

				view:first-child {
					font-size: 32rpx;
				}

				view:last-child {
					color: #Fff;

					.image {
						margin-left: 10rpx;
						width: 15rpx;
						height: 20rpx;
					}
				}

				.imas {
					position: absolute;
					top: -50rpx;
					left: -6rpx;
					height: 80px;
					width: calc(100% + 10rpx);
					z-index: 0;
				}
			}

			.BgM4 {
				background-color: #fff;
				margin: 50rpx auto 0;
				// position: absolute;
				// left: 20rpx;
				// top: 50px;
				width: calc(100% - 40rpx);
				border-radius: 8px;

				.listM4 {
					width: calc(100% - 80rpx);
					height: 72px;
					border-radius: 8px 8px 0px 0px;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx;
					border-bottom: 1rpx solid #F3F3F3;

					.M4List {
						width: 80%;

						view:last-child {
							color: #9F9F9F;
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}

					image {
						width: 15rpx;
						height: 20rpx;
					}
				}
			}

		}
	}

	.showModel {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.box {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 50%;
			height: 500rpx;
			// background-color: #fff;
			border-radius: 16rpx;
			margin-top: -250rpx;
			margin-left: -250rpx;

			.showbox {
				width: 500rpx;
				height: 200rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx;
				margin: 40rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 96rpx;
					height: 96rpx;
					border-radius: 24rpx;
					background-color: #21A1F8;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					margin-left: 40rpx;
					font-size: 40rpx;
					color: #21A1F8;
				}
			}

			.showbox:last-child {
				view {
					background-color: #FFA030;
				}

				text {
					color: #FFA030;
				}
			}
		}
	}
</style>